@import '../../assets/less/common.less';

.hm-page {
  box-sizing: border-box;

  &.address {
    width: 100vw;
    min-height: 100vh;
    background-color: #F6F4F6;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 180rpx;

    .btn-wrap {
      position: fixed;
      bottom: 38rpx;
      bottom: 68rpx;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding: 0 72rpx;

      .btn {
        width: 272rpx;
        height: 88rpx;
        color: #ffffff;
        border-radius: 102rpx;
        box-shadow: 0px 2rpx 8rpx 0rpx rgba(255, 71, 126, 0.25);
        .hm-flex();
        font-size: 28rpx;

        .icon {
          width: 36rpx;
          height: 36rpx;
          background-size: 100% 100%;
          margin-right: 10rpx;
        }

        &.cus-add {
          background-color: #FF477E;

          .icon {
            .hm-img('@{baseUrl}/address/cus-add.png');
          }
        }

        &.wx-add {
          background-color: #09C405;

          .icon {
            .hm-img('@{baseUrl}/address/wx-add.png');
          }
        }
      }
    }

    .empty-wrap {
      margin: 0 auto;
      margin-top: 32rpx;
      width: 686rpx;
      height: 306rpx;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 8rpx;

      .van-empty__image {
        width: 152rpx;
        height: 106rpx;
      }

      background-color: #fff;

      .empty-img-wrap {
        .empty-img {
          width: 152rpx;
          height: 106rpx;
        }
      }
    }

    .address-list {

      .address-item {
        width: 686rpx;
        height: 284rpx;
        background: #ffffff;
        border-radius: 8rpx;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 32rpx;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 24rpx 32rpx;
        position: relative;

        .selected {
          position: absolute;
          width: 40rpx;
          height: 40rpx;
          background: #09C405;
          border: 2rpx solid #09C405;
          border-radius: 50%;
          box-sizing: border-box;
          .hm-flex();
          color: #fff;
          font-size: 24rpx;
          font-weight: bold;
          top: 99rpx;
          right: 32rpx;
          // transform: rotate(12deg);

          .gou {
            width: 20rpx;
            height: 18rpx;
            .hm-img("@{baseUrl}/address/gou.png");

          }
        }

        .address-top {
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.40);
          position: relative;

          .phone {
            margin-left: 20rpx;
          }

          .close {
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            top: 0;
            right: 0;
            .hm-img("@{baseUrl}/address/close.png");
          }
        }

        .address-detail {
          color: #333333;
          font-size: 28rpx;
          background-size: 100% 100%;
          flex: 1;
          border-bottom: 2rpx solid #E8E8E8;
          .hm-flex();
          justify-content: flex-start;
        }

        .op-wrap {
          height: 66rpx;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;

          .edit {
            color: rgba(0, 0, 0, 0.40);
            font-size: 24rpx;
          }
        }
      }
    }
  }
}